let leftArrow = document.querySelector(".leftArrow");
let rightArrow = document.querySelector(".rightArrow");
let pointList = document.querySelectorAll(".pointBox li ");
let ul = document.querySelector(".carouselBox ul");
let carouselBox = document.querySelector(".carouselBox");



let nowIndex = 0;
// 左箭头 事件 

leftArrow.addEventListener("click", function () {
    // nowIndex++;
    // if(nowIndex == ul.childElementCount){
    //     nowIndex = 0;
    // }

    (++nowIndex == ul.childElementCount) && (nowIndex = 0);
    ul.style.transform = `translatex(-${nowIndex}00%)`;

    pointList.forEach(function (item) {
        item.classList.remove("active");
    })

    pointList[nowIndex].classList.add("active");

})


// 右箭头 事件
rightArrow.addEventListener("click", function () {
    // nowIndex--;

    // if (nowIndex < 0) {
    //     nowIndex = ul.childElementCount -1;

    // }

    (--nowIndex < 0) && (nowIndex = ul.childElementCount - 1);
    ul.style.transform = `translatex(-${nowIndex}00%)`;

    pointList.forEach(function (item) {
        item.classList.remove("active");
    })
    pointList[nowIndex].classList.add("active");

})

// 小圆点
pointList.forEach(function (item, index) {
    item.addEventListener("click", function () {
        pointList.forEach(function (item) {
            item.classList.remove("active");

            nowIndex = index;
            pointList[nowIndex].classList.add("active");
            ul.style.transform = `translateX(-${nowIndex}00%)`;
        })
    })
})


// 自动播放
let timer = setInterval(function () {

    (++nowIndex == ul.childElementCount) && (nowIndex = 0);
    ul.style.transform = `translatex(-${nowIndex}00%)`;

    pointList.forEach(function (item) {
        item.classList.remove("active");
    })

    pointList[nowIndex].classList.add("active");

}, 1000)


